<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <div>
          <title-card title="markdown" />
          <mark-vditor
            v-model:value="markdownValue"
            ref="markDownRef"
            placeholder="这是占位文本"
          />
          <title-card title="showdown" />
          <markdown-viewer :value="markdownValue" />

          <title-card title="插件引入" />
          <pre-code :code="initNpm" language="JavaScript" />

          <title-card title="初始化vditor" />
          <pre-code :code="initVditor" language="JavaScript" /> 

          <title-card title="用showdown预览markdown文件" />
          <pre-code :code="initShowdown" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script name="MarkDown" setup>
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import MarkVditor from './MarkVditor';
import MarkdownViewer from './MarkdownViewer';
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const markdownValue = ref('11');
const initNpm = ref(`npm install vditor --save

npm install showdown --save
`);
const initVditor = ref(`<div ref="wrapRef"></div>

import Vditor from 'vditor';
import 'vditor/dist/index.css';

const init = () => {
  const wrapEl = wrapRef.value;
  // if (!wrapEl) return;
  vditorRef.value = new Vditor(wrapEl, {
    theme: sideTheme.value == 'theme-dark' ? 'dark' : 'classic',
    lang: 'zh_CN',
    mode: 'sv',
    height: 360,
    fullscreen: {
      index: 520,
    },
    preview: {
      actions: [],
    },
    input: (v) => {
      valueRef.value = v;
      emits('update:value', v);
      emits('change', v);
    },
    after: () => {
      nextTick(() => {
        vditorRef.value.setValue(valueRef.value);
      });
    },
    blur: () => {
      // vditorRef.value.setValue(valueRef.value);
    },
    cache: {
      enable: false,
    },
  });
};
`);
const initShowdown = ref(`<div v-html="getHtmlData" class="markdown-viewer"></div>

import showdown from 'showdown';

const converter = new showdown.Converter();
converter.setOption('tables', true);
const props = defineProps({
  value: { type: String },
  class: { type: String },
});
const getHtmlData = computed(() => converter.makeHtml(props.value || ''));
`);

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const getTitle = () => {
  postArticleDetail({
    route: 'MarkDown',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
